<template>
	<view class="section_con">
		<view class="top_con">
			<view class="top_search">
				<view class="left">
					<image src="/static/images/search.png"></image>
					<u-input :border="false" type="text" placeholder='请输入医生名称搜索' v-model="queryFetch.doctorName" style="width:70%;padding-left: 20rpx;"></u-input>
				</view>
				<view class="btn" @click="search()">搜索</view>
			</view>
		</view>
		<view class="tabs_con">
			<view class="tabs_title">
				<span :class="{activeSpan:current === 0}" @click="reservaDocClick()">预约医师</span>
				<!-- <span :class="{activeSpan:current === 1}" @click="evaluateClick()">患者评价</span> -->
			</view>
		</view>
		<view class="content_con">
			<view class="tabs_btn">
				<span :class="{activeBtn:currentBtn === index}" v-for="(val,index) in tabs" :key="index" @click="btnClick(index)">{{ val.name }}</span>
			</view>
			<view class="list" v-for="(val,index) in doctorList" :key="index">
				<view class="info">
					<image :src="imgHttps + val.doctorImg[0]"></image>
					<view class="info_box">
						<view class="up">
							<view class="name">{{val.doctorName}}</view>
							<view class="tag">{{val.introduction}}</view>
							<!-- <view class="tag">中医基础系</view> -->
						</view>
						<view class="down">
							<view class="star">{{val.title}}</view>
							<!-- <view class="star">三甲</view> -->
						</view>
					</view>
				</view>
				<view class="label">
					<view class="card">
						<image src="/static/images/lable1.png"></image>
						<text>服务</text>
						<span>{{val.serviceCount}}</span>	
					</view>
					<view class="card">
						<image src="/static/images/lable2.png"></image>
						<text>评价</text>
						<span>{{val.ratingCount}}</span>	
					</view>
					<view class="card">
						<image src="/static/images/lable3.png"></image>
						<text>锦旗</text>
						<span>{{val.bannerCount}}</span>	
					</view>
				</view>
				<view class="descraption">
					{{val.expertise}}
				</view>
				<view class="bottom">
					<view class="btn" @click="appointmentClick(val)">挂号看诊</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { searchDoctor } from "@/api/consultation";
	export default{
		data(){
			return{
				imgHttps:'https://shop-img.xiangruzy.cn',
				current:0,
				currentBtn:0,
				queryFetch:{
					shopCode:'SH1756479678793492393',//门店编号
					departmentCode:'',//科室编号
					queryStr:'',
					doctorName:''
				},
				tabs:[
					{name:'最快看诊'},{name:'面诊优先'},{name:'好评优先'},
				],
				doctorList:[]
			}
		},
		onShow() {
			this.getSearchDoctorFun()
		},
		methods:{
			async getSearchDoctorFun(){
				let that = this
				let res = await searchDoctor(that.queryFetch)
				console.log(res)
				if(res.code == 200){
					that.doctorList = res.rows || []
				}
			},
			search(){
				this.getSearchDoctorFun()
			},
			reservaDocClick(){
				this.current = 0
			},
			evaluateClick(){
				this.current = 1
			},
			btnClick(i){
				this.currentBtn = i
			},
			// 预约详情
			appointmentClick(val){
				uni.navigateTo({
					url:"/pages/tabbar/home/appointment?shopCode=SH1756479678793492393&"+'departmentCode='+val.departmentCode+'&doctorCode='+val.doctorCode
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.section_con{
		font-family: PingFang SC, PingFang SC;
		background: #fff;
		padding: 14rpx 0rpx;
		height:100%;
		width:100%;
		.top_con{
			padding: 0 30rpx;
			margin-bottom: 33rpx;
			.top_search{
				background: #F3F3F3;
				border-radius: 40rpx;
				padding: 0 12rpx 0 29rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					width:100%;
					image{
						width:30rpx;
						height:33rpx;
					}
				}
				
				.btn{
					background: #7D2527;
					width:105rpx;
					height:50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 30rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
		.tabs_con{
			padding: 0 30rpx;
			margin-bottom: 24rpx;
			.tabs_title{
				display: flex;
				align-items: center;
				span{
					font-weight: 400;
					font-size: 30rpx;
					color: #727272;
					margin-right: 50rpx;
				}
				.activeSpan{
					font-weight: 600;
					font-size: 34rpx;
					color: #000000;
				}
			}
		}
		.content_con{
			background: #F8F8F8;
			padding: 30rpx;
			.tabs_btn{
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				span{
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					margin-right: 26rpx;
					padding: 16rpx;
				}
				.activeBtn{
					font-weight: 400;
					font-size: 26rpx;
					color: #7D2527;
					padding: 16rpx;
					background: #FFEAEA;
					border-radius: 10rpx;
				}
			}
			.list{
				background: #FFFFFF;
				border-radius: 18rpx;
				margin-bottom: 18rpx;
				padding: 30rpx;
				.info{
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					image{
						width:110rpx;
						height:110rpx;
						border-radius: 50%;
					}
					.info_box{
						padding-left: 24rpx;
						flex: 1;
						.up{
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							.name{
								font-weight: 600;
								font-size: 34rpx;
								color: #000000;
								margin-right: 20rpx;
							}
							.tag{
								flex: 1;
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
								margin-right: 20rpx;
								// 新增以下样式，实现三行超出显示省略号
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
							}
						}
						.down{
							display: flex;
							align-items: center;
							.hospital{
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
								margin-right: 20rpx;
							}
							.star{
								font-weight: 400;
								font-size: 26rpx;
								color: #43578E;
							}
						}
					}
				}
				.label{
					display: flex;
					padding: 15rpx 31rpx;
					background: #F5F4EC;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					margin-bottom: 18rpx;
					.card{
						flex: 1;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 26rpx;
						text{
							color: #333333;
							margin-right: 15rpx;
						}
						span{
							color:#7D2527;
						}
						image{
							width:26rpx;
							height:27rpx;
							margin-right: 10rpx;
						}
					}
				}
				.descraption{
					margin-bottom: 22rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					// 新增以下样式，实现三行超出显示省略号
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
				}
				.bottom{
					display: flex;
					justify-content: flex-end;
					.btn{
						width:205rpx;
						height:60rpx;
						line-height: 60rpx;
						text-align: center;
						background: rgba(125,37,39,0.2);
						border-radius: 50px 50px 50px 50px;
						border: 1px solid #7D2527;
						border-radius: 50rpx;
						font-weight: 500;
						color:#7D2527;
						font-size: 35rpx;
					}
				}
			}
		}
	}
	
</style>